import React, { useEffect, useState } from "react";
import styles from "./HomePage.module.css";
import { Row, Col, Typography, Button, Empty, Pagination } from "antd";
import {
  Header,
  Footer,
  SideMenu,
  Carousel,
  ProductCollection,
  BusinessPartners,
} from "../../components";
import sideImage from "../../assets/images/sider_2019_12-09.png";
import sideImage2 from "../../assets/images/sider_2019_02-04.png";
import sideImage3 from "../../assets/images/sider_2019_02-04-2.png";
import { useLocation } from "react-router-dom"
import axios from "axios";
import { ArrowUpOutlined, MessageFilled, MessageOutlined, PhoneFilled, PhoneOutlined, UpSquareFilled, WechatOutlined } from "@ant-design/icons";
import rowwimg from "../../assets/images/yy.png"
import { useDebounce } from "../../hooks/useDebounce";
import { useNavigate } from "react-router-dom"
const HomePage: React.FC = () => {
  const [cate, setCate] = useState<Array<any>>([])
  const [list1, setList] = useState<Array<any>>([])
  const [list2, setList2] = useState<Array<any>>([])
  const [show, setShow] = useState<boolean>(true)
  const [recommended1, setRecommended1] = useState<Array<any>>([])
  const [recommended2, setRecommended2] = useState<Array<any>>([])
  const [recommended3, setRecommended3] = useState<Array<any>>([])
  const [typeId, setTypeId] = useState<number | string>(0)
  const [total, setTotal] = useState<number>(0)
  const [cateShow, setCateShow] = useState<boolean>(true)
  const location = useLocation()
  const navigate = useNavigate()
  useEffect(() => {
    axios.post('http://42.193.113.4:9091/v1/hp', {

    })
      .then((response: any) => {
        if (response.data.code === 20000) {
          setShow(false)
          setCate(response.data.data.data.type)
          setList(response.data.data.data.banner)
          formatterList(response.data.data.data)
        }
      })
      .catch((error) => {
        console.log(error);
      }).finally(() => {
        setShow(false)
      });

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };


  }, [])

  const handleScroll = () => {

  };

  const handleClick = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }

  // 格式化数据
  const formatterList = (data: any) => {
    console.log(data, "data")
    const { TProductList } = data
    console.log(TProductList[1], 2131)
    setRecommended1(TProductList[1])
    setRecommended2(TProductList[2])
    setRecommended3(TProductList[3])
  }

  const goDetail = (item: any) => {
    navigate(
      '/detail',
      { state: { id: item.id } }
    )
  }

  // 请求对应分类数据
  const handleClick1 = (e) => {
    if (e.key == cate[0].id) {
      return setCateShow(true)
    }
    setTypeId(e.key)
    axios.post('http://42.193.113.4:9091/v1/type?' + `typeId=${e.key}&pageNum=1&pageSize=10`, {

    })
      .then((response: any) => {
        if (response.data.code === 20000) {
          setCateShow(false)
          setList2(response.data.data.data)
          console.log(response.data.data.data)
          setTotal(response.data.data.total)
        }
      })
      .catch((error) => {
        console.log(error);
      }).finally(() => {

      });
  }

  const onChange = (e) => {
    axios.post('http://42.193.113.4:9091/v1/type?' + `typeId=${typeId}&pageNum=${e}&pageSize=10`, {

    })
      .then((response: any) => {
        if (response.data.code === 20000) {
          setCateShow(false)
          setList2(response.data.data.data)
          setTotal(response.data.data.total)
        }
      })
      .catch((error) => {
        console.log(error);
      }).finally(() => {

      });
  }

  return (
    <div>
      {
        <div className={!cateShow ? styles['main1'] : styles['main']}>
          <div className={styles["header-content"]}>
            <Header list={cate} handleClick1={handleClick1}></Header>
          </div>
          {!cateShow &&
            <div className={styles.goods}>
              {list2.length > 0 ? list2.map((item, i) => {
                return <div key={i} className={styles['list-info']}>
                  <div className={styles['product']}>
                    <img className={`${styles.productimg} ${styles.producthover}`} src={item.titleUrl}></img>
                    <div className={`${styles.info} ${styles.box}`}>
                      <h2>{item.name}</h2>
                      <div className={`${styles.tag}`}>
                        {
                          item.label.split(",").map((items, index) => {
                            return <span key={index} className={`${styles['tag-box']}`}>{items}</span>
                          })
                        }
                      </div>
                      <div className={styles['info-desc']}>
                        <div>
                          适合团队: {item.team}
                        </div>
                        <div>
                          推荐季节: {item.times}
                        </div>
                        <div className={styles['desc-text']}>
                          推荐理由: {item.reason}
                        </div>
                        <div className={styles['menubtn']}>
                          <Button type="primary" shape="round" onClick={() => { goDetail(item) }}>查看更多</Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              }) : <Empty description="暂无数据"></Empty>}
              <Pagination defaultCurrent={1} total={total} onChange={onChange} />
            </div>
          }

          {cateShow && <div className={styles["page-content"]}>
            <div className={styles["carousel-content"]}>
              <Carousel list={list1} />
            </div>
            <div className={styles["content"]}>
              <ProductCollection
                title={
                  <Typography.Title level={3} type="warning">
                    爆款推荐
                  </Typography.Title>
                }
                sideImage={sideImage}
                products={recommended1}
              />
              <ProductCollection
                title={
                  <Typography.Title level={3} type="danger">
                    新品上市
                  </Typography.Title>
                }
                sideImage={sideImage2}
                products={recommended2}
              />
              <ProductCollection
                title={
                  <Typography.Title level={3} type="success">
                    热门推荐
                  </Typography.Title>
                }
                sideImage={sideImage3}
                products={recommended3}
              />
              <BusinessPartners />
            </div>

          </div>}

          <div className={styles['flu']}>
            <div className={`${styles.fluk1} ${styles.fuk4}`}>
              <PhoneFilled style={{ fontSize: "24px" }} />
              <p>电话</p>
              <div className={styles['visibility-box']}>
                <img className={`${styles.yy}`} src={rowwimg} />
                18629429514
              </div>
            </div>
            <div className={styles['fluk1']}>
              <WechatOutlined style={{ fontSize: "24px" }} />
              <p>微信</p>
            </div>
            <div className={styles['fluk1']}>
              <MessageFilled style={{ fontSize: "24px" }} />
              <p>咨询</p>
            </div>
            <div className={styles['fluk1']} onClick={useDebounce(handleClick, 300)}>
              <UpSquareFilled style={{ fontSize: "24px" }} />
              <p>置顶</p>
            </div>
          </div>
          <Footer />
        </div>
      }

    </div>
  );

}

export default HomePage

